<template>
  <PageWrapper title="服务器管理" content="">
    <Card title="服务器列表" v-bind="$attrs">
      <template #extra>
        <a-button type="link" size="small">更多</a-button>
      </template>

      <a-card hoverable v-for="server in servers" style="margin-bottom: 20px">
        <template #actions>
          <setting-outlined key="setting" />
          <edit-outlined key="edit" />
          <span>
          <a-tooltip v-if="server.isActive">
            <template #title>设为离线</template>
            <pause-outlined @click="setActive(server, false)" key="ellipsis"
          /></a-tooltip>
          <a-tooltip v-if="!server.isActive">
            <template #title>设为在线</template
            ><play-circle-outlined @click="setActive(server, true)" key="ellipsis"
          /></a-tooltip></span>
        </template>
        <a-card-meta :title="server.name" description="">
          <template #avatar>
            <Icon icon="mdi:server" size="30" />
          </template>
        </a-card-meta>
        <a-row>
          <a-col :span="4"> <Icon icon="ph:cpu" size="" /> CPU: 32 CPU</a-col>
          <a-col :span="4"> <Icon icon="bi:memory" size="" /> 内存: 128 GB</a-col>
          <a-col :span="4"> <Icon icon="icon-park-outline:solid-state-disk" /> 磁盘: 1 TB </a-col>
          <a-col :span="4"> <Icon icon="clarity:vm-solid" /> VM: {{ server.vms.length }}</a-col>
          <a-col :span="4">
            状态: <a-tag v-if="server.isActive" color="success">在线</a-tag
            ><a-tag v-if="!server.isActive" color="error">离线</a-tag>
          </a-col>
        </a-row>
      </a-card>
    </Card>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import { PageWrapper } from '/@/components/Page'
  import { Card } from 'ant-design-vue'
  import {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    PauseOutlined,
    PlayCircleOutlined,
  } from '@ant-design/icons-vue'
  import { Icon } from '/@/components/Icon'
  import { groupItems } from '../dashboard/workbench/components/data'
  import { useDataStore } from '/@/store/modules/data'
  import { notification } from 'ant-design-vue';


  const data = useDataStore()

  function setActive(server, state) {
    data.setServerState(server, state)
    setTimeout(() => {
      notification['success']({
        message: '操作结果',
        description:
          '设置物理机状态成功！',
      });
      1000
    })
  }

  export default defineComponent({
    components: {
      PageWrapper,
      Card,
      CardGrid: Card.Grid,
      Icon,
      SettingOutlined,
      EditOutlined,
      EllipsisOutlined,
      PauseOutlined,
      PlayCircleOutlined,
    },
    setup() {
      return { items: groupItems, servers: data.servers, setActive }
    },
  })
</script>
